<template>
	<!-- 电梯管理 添加/编辑/详情 -->
	<div class="compile">
		<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
		 :title="title" :visible.sync="addAndCompileShow">
			<el-form :model="form" :rules="rules" ref="form" v-loading='isLoading' size="mini">
				<!-- 电梯信息 -->
				<el-row>
					<div class="textLeft titleMessNow">电梯信息</div>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="电梯设备简称:" :label-width="formLabelWidth" prop='liftName'>
							<el-input size="mini" v-model="form.liftName" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="注册代码:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.markingCode" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="内部编号(楼号):" :label-width="formLabelWidth" prop='interNum'>
							<el-input size="mini" v-model="form.interNum" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="电梯工号:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.liftJobNum" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="电梯出厂编号:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.appearNum" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="设备性质:" :label-width="formLabelWidth" prop='equipment'>
							<el-select size="mini" v-model="form.equipment" placeholder="请选择设备性质" clearable :disabled='detailDisable'>
								<el-option v-for="item in equipmentArr" :value="item.value" :label="item.label" :key='item.value'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="额定载重:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.truck" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="层/站/门:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.door" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="电梯类型" :label-width="formLabelWidth" prop='liftType'>
							<el-select size="mini" v-model="form.liftType" placeholder="请选择电梯类型" clearable :disabled='detailDisable'>
								<el-option v-for="item in liftTypeArr" :value="item.value" :label="item.label" :key='item.value'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="使用状态:" :label-width="formLabelWidth" prop='userType'>
							<el-select size="mini" v-model="form.userType" placeholder="请选择使用类型" clearable :disabled='detailDisable'>
								<el-option v-for="item in userTypeArr" :value="item.value" :label="item.label" :key='item.value'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="额定速度:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.rateSpeed" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="电梯型号:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.liftModel" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="维保周期/天:" :label-width="formLabelWidth" prop='period'>
							<el-input-number size="mini" v-model="form.period" :min="3" :max="15" label="请输入维保周期" :disabled='detailDisable'></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="96333编号:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.num" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 单位信息 -->
				<!-- <el-row>
					<div class="textLeft titleMessNow">电梯信息</div>
				</el-row> -->
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="制造单位" :label-width="formLabelWidth">
							<el-select placeholder="请选择制造单位" filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loadingSelected"
							 v-model="form.madeName" :disabled='detailDisable' @change="changeFirmList" clearable>
								<el-option v-for="(item) in madeNameArr" :label="item.name" :value="item.id" :key='item.id'></el-option>
							</el-select>
							<!-- <el-input size="mini" v-model="form.madeName" autocomplete="off" clearable :disabled='detailDisable'></el-input> -->
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="安装单位:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.units" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="维保单位" :label-width="formLabelWidth">
							<el-select size="mini" v-model="form.company" placeholder="请选择维保单位" clearable :disabled='detailDisable'>
								<el-option v-for="item in companyUnitArr" :value="item.value" :label="item.label" :key='item.value'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="使用单位:" :label-width="formLabelWidth" prop="userUnit">
							<el-select size="mini" @focus="getUserUnit" :remote-method="findUserUnit" filterable remote v-model="form.userUnit"
							 placeholder="请选择使用单位" clearable :disabled='detailDisable'>
								<el-option v-for="item in userUnitArr" :value="item.id" :label="item.label" :key='item.id'>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="使用位置:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.liftSite" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="下次检验日期:" :label-width="formLabelWidth">
							<el-date-picker v-model="form.nextTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"
							 :disabled='detailDisable'>
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10" :offset='1'>
						<el-form-item label="400电话:" :label-width="formLabelWidth">
							<el-input size="mini" v-model="form.phoneNum" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="10" :offset='2'>
						<el-form-item label="检验结论:" :label-width="formLabelWidth">
						<el-input size="mini" v-model="form.inspection_conclusion" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!-- <el-col :span="10" :offset='1'>
						<el-form-item label="检验人员:" :label-width="formLabelWidth">
						<el-input size="mini" v-model="form.inspection_people" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col> -->
					<el-col :span="10" :offset='1'>
						<el-form-item label="检验单位:" :label-width="formLabelWidth">
						<el-input size="mini" v-model="form.inspection_company" autocomplete="off" clearable :disabled='detailDisable'></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 电梯二维码 -->
				<div v-if="title == '电梯管理详情' && roleId == 0">
					<el-row>
						<div class="textLeft titleMessNow">电梯二维码</div>
					</el-row>
					<el-row>
						<el-col :span="10" :offset="1">
							<div id="qrcode">
								<img :src="imgUrl" id="qrImg" style="width: 150px;">
								<el-button @click="print">打印二维码</el-button>
							</div>
						</el-col>
					</el-row>
				</div>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close(2)">取 消</el-button>
				<el-button type="primary" @click="submit('form')" v-loading='ensureBtn' v-if="!detailDisable">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import QRCode from 'qrcode'
	import {
		axiosPost,
		axiosGet,
		loadFn,
		axiosChange,
	} from "@/common.js"
	import {
		liftName,
		markingCode,
		interNum,
		equipment,
		liftModel,
		period,
		userUnit,
		userType,
		company,
		liftType
	} from "./rule.js"
	export default {
		props: ['addAndCompileShow', 'isAddOrComp', 'rowId'],
		mounted() {
			if (this.title == '添加电梯管理') {
				this.isLoading = false
				this.getFirmNameList()
			}
			if (localStorage.company_name) {
				if (JSON.parse(localStorage.company_name).name && JSON.parse(localStorage.company_id).id) {
					this.companyUnitArr = [{
						label: JSON.parse(localStorage.company_name).name,
						value: JSON.parse(localStorage.company_id).id,
					}]
					this.form.company = JSON.parse(localStorage.company_id).id
				}
			}

		},
		data() {
			return {
				formLabelWidth: '120px',
				form: {
					liftName: '',
					markingCode: '',
					interNum: '',
					liftJobNum: '',
					appearNum: '',
					equipment: '',
					truck: '',
					door: '',
					userType: '',
					liftType: '',
					rateSpeed: '',
					liftModel: '',
					period: '15',
					madeName: '',
					units: '',
					userUnit: '',
					company: '',
					num: '',
					liftSite: '',
					nextTime: '',
					phoneNum: '400-168-9229',
					inspection_people:'',
					inspection_conclusion:'',
					inspection_company:''
				},
				ensureBtn: false,
				rules: {
					liftName,
					markingCode,
					interNum,
					equipment,
					liftModel,
					period,
					userUnit,
					userType,
					company,
					liftType
				},
				equipmentArr: [{
						label: "安置房小区",
						value: 10
					},
					{
						label: "商品房小区",
						value: 20
					},
					{
						label: "医院,学校,机关事业单位",
						value: 30
					},
					{
						label: "其他",
						value: 40
					},
				],
				liftTypeArr: [{
						label: "曳引与强制驱动电梯",
						value: 10
					},
					{
						label: "液压驱动电梯",
						value: 20
					},
					{
						label: "杂物电梯",
						value: 30
					},
					{
						label: "自动扶梯",
						value: 40
					}
				],
				userTypeArr: [{
						value: 10,
						label: "正常",
					},
					{
						value: 20,
						label: "正常,临时停用",
					},
					{
						value: 30,
						label: "正常,长期停用",
					},
					{
						value: 40,
						label: "正常,拆除",
					},
					{
						value: 50,
						label: "维修停用",
					},
					{
						value: 60,
						label: "已报停用",
					},
					{
						value: 70,
						label: "拆除",
					},
				],
				userUnitArr: [],
				madeNameArr: [],
				loadingSelected: false,
				imgUrl: '',
				qr_code: '',
				property_company_name: '',
				isLoading: true,
				companyUnitArr: [],
				companyName: localStorage.company_name ? JSON.parse(localStorage.company_name).name : '',
			}
		},
		computed: {
			detailDisable() {
				if (this.title == '电梯管理详情') {
					return true
				} else {
					return false
				}
			},
			title() {
				if (this.isAddOrComp == 1) {
					return '添加电梯管理'
				} else if (this.isAddOrComp == 2) {
					this.getDetail()
					return '编辑电梯管理'
				} else {
					this.getDetail()
					return '电梯管理详情'
				}
			},
			roleId() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			},
		},
		methods: {
			//接入厂家信息情况后重新获取
			changeFirmList(res) {
				if (!res) {
					this.getFirmNameList()
				}
			},
			getFirmNameList(query = '') {
				let params = {
					page: 1,
					page_size_count: 10,
					key_words: query
				}
				this.loadingSelected = true
				axiosGet('/basic/elevator/manufacturer/', params, (res) => {
					this.loadingSelected = false
					if (res.code == 0) {
						this.madeNameArr = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			remoteMethod(query) {
				this.getFirmNameList(query)
			},
			copy() {
				/* 创建range对象   */
				const range = document.createRange();
				range.selectNode(document.getElementById('content'));
				/* 窗口的selection对象，表示用户选择的文本 */
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
				selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
				document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
			},
			copy1() {
				/* 创建range对象   */
				const range = document.createRange();
				range.selectNode(document.getElementById('content1'));
				/* 窗口的selection对象，表示用户选择的文本 */
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
				selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
				document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
			},
			//打印二维码
			print() {
				var printHtml = document.getElementById('qrImg').outerHTML.replace('150px', '1.8in'),
					newWindow = window.open("", 'newWindow');
				printHtml +=
					`<div class="wrapper"><div class="wai"><div class="mainT">使用单位：</div >	<div class="company-name">${this.property_company_name}</div></div> <div class="wai"> <div class="mainT">内部编号：</div>	<div class="company-name">${this.form.interNum}</div> </div> <div class="wai"><div class="mainT">维保单位：</div><div class="company-name">${this.companyName ? this.companyName : ''}</div></div>  <div class="wai"><div  class="mainT">注册号码：</div><div class="company-name">${this.form.markingCode}</div></div>   <div class="wai" ><div class="mainT" >服务平台：</div >	<div class="company-name">无锡惠成信息技术有限公司</div></div>  <div class="wai" ><div class="mainT" >服务电话：</div >	<div class="company-name" >${this.form.phoneNum}</div></div> </div>`

				// console.log(printHtml)
				newWindow.document.title = '二维码'
				// 					newWindow.document.getElementsByTagName('head')[0].appendChild()
				var head = newWindow.document.head || newWindow.document.getElementsByTagName('head')[0];
				var style = newWindow.document.createElement('style');
				style.setAttribute('media', 'print'); //media="print"
				style.innerHTML =
					`@page {
							      size: 4in 2.51in;  /* auto is the initial value */
							      margin: 0mm; /* this affects the margin in the printer settings */
							    }
									body{    width: 4in;
									height: 2.51in;
									    padding: 0;
									margin: 0;
									position: relative;}
									img{    display: inline-block;
									 width: 1.8in;
				vertical-align: top;
				margin-top: 0.4in;}
					.mainT{
						float: left;
				line-height: 18px;
				font-size: 11px;
					}
					.wai{
						    min-width: 2.2in;
							min-height: 0.3in;
							font-size: 11px;
							display:flex;
						
					}
					.wrapper{
						display: inline-block;
				margin-top: 0.45in;
				vertical-align: middle;
				max-width: 2.2in;
					}
					.rb{position: absolute;
				right: 17px;
				bottom: 60px;
				font-size: 11px;}
									.company-name{   
										font-size: 11px;
				text-align: left;
				margin: 0;
					 line-height: 18px;
					max-width: 1.5in;
				float: left;
				}
					.rbT{position: absolute;
					right: 79px;
					bottom: 63px;
					font-size: 11px;
					text-align: left;
					}
									.company-name{    font-size: 11px;
					text-align: left;
					margin: 0;
					}
					`;
				head.appendChild(style);
				var stylePage = newWindow.document.createElement('style');
				stylePage.innerHTML =
					`@page {
													size: 4in 2.51in;  /* auto is the initial value */
													margin: 0mm; /* this affects the margin in the printer settings */
												}
												body{    width: 4in;
												height: 2.51in;
														padding: 0;
												margin: 0;
												position: relative;}
												img{    display: inline-block;
												width: 1.8in;
								vertical-align: top;
								margin-top: 0.4in;}
								.mainT{
									float: left;
								line-height: 18px;
								font-size: 11px;
								}
								.wai{
											min-width: 2.2in;
										min-height: 0.3in;
										font-size: 11px;
										display:flex;
										
								}
								.wrapper{
									display: inline-block;
								margin-top: 0.45in;
								vertical-align: middle;
								max-width: 2.2in;
								}
								.rb{position: absolute;
								right: 17px;
								bottom: 60px;
								font-size: 11px;}
												.company-name{   
													font-size: 11px;
								text-align: left;
								margin: 0;
								line-height: 18px;
								max-width: 1.5in;
								float: left;
								}
								.rbT{position: absolute;
								right: 79px;
								bottom: 63px;
								font-size: 11px;
								text-align: left;
								}
												.company-name{    font-size: 11px;
								text-align: left;
								margin: 0;
								}
								`;
				head.appendChild(stylePage);
				newWindow.document.body.innerHTML = printHtml;
				newWindow.print();
			},
			//获取编辑数据
			getDetail() {
				let id = this.rowId
				let url = 'basic/elevator/' + id + '/'
				axiosGet(url, {}, (res) => {
					console.log(res)
					this.isLoading = false
					if (res.code == 0) {
						if (res.detail.maintain_company && res.detail.maintain_company_name) {
							this.companyUnitArr = [{
								value: res.detail.maintain_company,
								label: res.detail.maintain_company_name
							}]
							this.form.company = res.detail.maintain_company
						}
						this.companyName = res.detail.maintain_company_name
						this.form.liftName = res.detail.elevator_name
						this.form.markingCode = res.detail.register_code
						this.form.interNum = res.detail.internal_no
						this.form.liftJobNum = res.detail.elevator_no
						this.form.appearNum = res.detail.factory_no
						this.form.equipment = res.detail.elevator_property
						this.form.truck = res.detail.rated_load
						this.form.door = res.detail.stations
						this.form.userType = res.detail.usage_status
						this.form.liftType = res.detail.elevator_type
						this.form.rateSpeed = res.detail.rated_speed
						this.form.liftModel = res.detail.elevator_model
						this.form.period = res.detail.elevator_cycle
						this.form.madeName = res.detail.manufacturer_company
						this.form.nextTime = res.detail.next_time
						// this.form.inspection_people = res.detail.inspection_people
						this.form.inspection_conclusion = res.detail.inspection_conclusion
						this.form.inspection_company = res.detail.inspection_company
						if (res.detail.phone_num) {
							this.form.phoneNum = res.detail.phone_num
						} else {
							this.form.phoneNum = '400-168-9229'
						}
						if (this.form.madeName && res.detail.manufacturer_company_name) {
							this.madeNameArr = [{
								id: this.form.madeName,
								name: res.detail.manufacturer_company_name
							}]
						} else {
							this.getFirmNameList()
						}
						this.form.units = res.detail.installation_company
						this.form.userUnit = res.detail.property_company
						this.property_company_name = res.detail.property_company_name
						this.form.num = res.detail.num
						this.form.liftSite = res.detail.address
						this.userUnitArr = [{
							id: res.detail.property_company,
							label: res.detail.property_company_name
						}]
						if (this.title == '电梯管理详情') {
							this.qr_code = res.detail.qr_code
							this.qr_code && QRCode.toDataURL(this.qr_code, {
									errorCorrectionLevel: 'H',
									type: 'image/jpeg',
									rendererOpts: {
										quality: 1
									},
									width: 244,
								})
								.then(url => {
									this.imgUrl = url
								})
								.catch(err => {
									console.error(err)
								})
						}
						console.log(this.userUnitArr)
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//获取使用单位
			userPublic(params) {
				axiosGet('/user/company/all', params, (res) => {
					if (res.code == 0) {
						this.userUnitArr = res.detail.results
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			getUserUnit() {
				let params = {
					company_type: 300,
					page_size_count: 30
				}
				this.userPublic(params)
			},
			//使用单位开启搜索
			findUserUnit(query) {
				console.log(query)
				let params = {
					company_type: 300,
					key_words: query
				}
				this.userPublic(params)
			},
			//添加/编辑按钮
			opationPub(url, method, data) {
				axiosChange(url, method, data, (res) => {
					this.ensureBtn = false
					if (res.code == 0) {
						this.close(1)
						this.$message({
							type: 'success',
							message: '操作成功!'
						})
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			oprationUintPub(value) {
				let data = {
					elevator_name: this.form.liftName, //电梯设备简称
					register_code: this.form.markingCode, //注册代码
					elevator_no: this.form.liftJobNum, //电梯工号
					internal_no: this.form.interNum, //内部编号
					factory_no: this.form.appearNum, //电梯出厂编号
					rated_load: this.form.truck, //额定载重
					stations: this.form.door, //层站门
					rated_speed: this.form.rateSpeed, //额定速度
					elevator_model: this.form.liftModel, //电梯型号
					elevator_type: this.form.liftType, //电梯类型
					usage_status: this.form.userType, //使用状态
					elevator_property: this.form.equipment, //设备性质
					manufacturer_company: this.form.madeName, //制造厂商名称
					installation_company: this.form.units, //安装单位
					maintain_company: this.form.company, //维保单位
					property_company: this.form.userUnit, //使用单位
					elevator_cycle: this.form.period,
					num: this.form.num,
					address: this.form.liftSite,
					next_time: this.form.nextTime,
					phone_num: this.form.phoneNum,
					// inspection_people:this.form.inspection_people,
					inspection_conclusion:this.form.inspection_conclusion,
					inspection_company:this.form.inspection_company
				}
				if (value == 1) {
					this.opationPub('/basic/elevator/', 'post', data)
				} else {
					let id = this.rowId
					let url = 'basic/elevator/' + id + '/'
					this.opationPub(url, 'put', data)
				}
			},
			//提交
			submit(ruleForm) {
				this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						this.ensureBtn = true
						if (this.isAddOrComp == 1) {
							this.oprationUintPub(1)
						} else {
							this.oprationUintPub(2)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//关闭
			close(value) {
				let newValue = 2
				if (value) {
					newValue = value
				}
				this.$emit('detailMaskShow', newValue)
			},
		}
	}
</script>
<style scoped lang="less">
</style>
